<!--
 * @Author: 小花
 * @Date: 2022-04-16 19:16:20
 * @LastEditors: 小花
 * @LastEditTime: 2022-04-20 19:15:22
 * @FilePath: /vue3-teap/src/components/NavMenu.vue
 * @Description:
-->
<template>
  <!-- 循环主页面的菜单信息（菜单均在主页面的子路由children下） -->
  <template v-for="(item, index) in navMenu" :key="index">
    <!-- 一级菜单：当前菜单存在子菜单，一级菜单下存在二级菜单 -->
    <el-sub-menu :index="item.path" v-if="item.children && item.children.length">
      <template #title>
        <i :class="item.meta.icon" aria-hidden="true"></i>
        <span> {{item.meta.title}} </span>
      </template>
      <nav-menu :navMenu="item.children"></nav-menu>
    </el-sub-menu>

    <!-- 一级菜单：当前菜单不存在子菜单，仅是一个一级菜单无二级菜单 -->
    <el-menu-item :index="item.path" :data-path="item.path" v-else>
      <i :class="item.meta.icon" aria-hidden="true"></i>
      <template #title><span> {{item.meta.title}} </span></template>
    </el-menu-item>
  </template>

</template>

<script lang='ts'>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'NavMenu',
  props: ['navMenu']
})
</script>
